import React, { memo, useEffect, useRef, useState } from "react";
import { useSelector, useDispatch, shallowEqual } from "react-redux";
import { myUserLevelAction } from "../store/actionTypes";
import { LevelWrap } from "./style";

export default memo(function Level() {
  const [levelInfo, setLevelInfo] = useState([]);
  const levelRef = useRef();
  const numRef = useRef();
  const pringRef = useRef();
  const pLoginRef = useRef();
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(myUserLevelAction());
  }, [dispatch]);
  const { userInf } = useSelector(
    (state) => ({
      userInf: state.getIn(["my", "levelInf"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    if (userInf.code === 200) {
      if (levelRef.current.children.length === 0) {
        for (let i = 0; i < userInf.data.level + 1; i++) {
          let a = i + 1;
          let cSpan = document.createElement("p");
          if (i === 0) {
            cSpan.innerHTML =
              "<span class=zero>0</span><span class=onec>" + a + "</span>";
          } else {
            cSpan.innerHTML = "<span class=onec>" + a + "</span>";
          }
          if (a === userInf.data.level) {
            cSpan.innerHTML = "<span class=selectL>" + a + "</span>";
          }
          levelRef.current.appendChild(cSpan);
        }
      }
      const arrayL = userInf.data.info.split("$");
      setLevelInfo(arrayL);
      if (pringRef) {
        pringRef.current.style.width =
          (100 * userInf.data.nowPlayCount) / userInf.data.nextPlayCount + "%";
      }
      if (pLoginRef) {
        pLoginRef.current.style.width =
          (100 * userInf.data.nowLoginCount) / userInf.data.nextLoginCount +
          "%";
      }
    }
  }, [userInf])(userInf);

  return (
    <LevelWrap
      progress={
        userInf.length !== 0
          ? (userInf.data.level / (userInf.data.level + 1) +
              userInf.data.progress / 10) *
            100
          : 0
      }
      num={userInf.length !== 0 ? 100 / (userInf.data.level + 1) : 0}
    >
      <div className="now_level">
        <h3>
          当前等级：
          <span className="ls">
            <i className="mylevel"></i>
            {userInf.length !== 0 ? userInf.data.level : ""}
          </span>
        </h3>
      </div>
      <div className="level_progress">
        <div ref={numRef} className="level_num"></div>
        <div className="level_pro">
          <div ref={levelRef} className="level_i"></div>
          <div className="level_proing"></div>
        </div>
      </div>
      <div className="levelSay">等级数据每天下午两点更新</div>
      <div className="levelVip">
        <span>当前等级特权：</span>
        <ul>
          {levelInfo.length !== 0
            ? levelInfo.map((item, index) => {
                return (
                  <li className="mylevel" key={index}>
                    {item}
                  </li>
                );
              })
            : ""}
        </ul>
        <a className="aboutmore" href="#">
          了解等级特权&gt;
        </a>
      </div>
      <div className="linex"></div>
      <div className="nextLevel">
        <h3>
          距离下一个等级：
          <span className="ls">
            <i className="mylevel"></i>
            {userInf.length !== 0 ? userInf.data.level + 1 : ""}
          </span>
        </h3>
      </div>
      <div className="uitl">
        <span className="tie">听歌：</span>
        <div className="tProgress">
          <span ref={pringRef} className="pring"></span>
        </div>
        <span>
          还需听歌
          {userInf.length !== 0
            ? userInf.data.nextPlayCount - userInf.data.nowPlayCount
            : 0}
          首
        </span>
      </div>
      <div className="uitl">
        <span className="tie">登录：</span>
        <div className="tProgress">
          <span ref={pLoginRef} className="pring"></span>
        </div>
        <span>
          还需登录
          {userInf.length !== 0
            ? userInf.data.nowLoginCount - userInf.data.nextLoginCount
            : 0}
          天
        </span>
      </div>
    </LevelWrap>
  );
});
